<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class与style绑定</title>

    <style>
        .aClass{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .bClass{
             width: 200px;
             height: 200px;
             background-color: sandybrown;
         }
        .cClass{
            font-family: 李旭科书法,serif;
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
    1/理解
        在应用界面中。某些元素的样式是会变化的 class/style绑定就是用来实现动态样式效果的技术
    2/class绑定： :class='xxx'
        xxx可以是字符串，可以是对象，也可以是数组
    3/style绑定
        :style="{ color: activeColor,fontSize:fontSize+ 'px'}"
-->
<div id="demo">
    <h2>1/class绑定: :class='xxx'</h2>
    <p class="cClass" :class="a">你好！</p>



    <p :class="{aClass:true,cClass:true,bClass:false}">xxx是对象</p>
    <p :class="['aClass','bClass']">xxx是对象</p>

    <h2>2/style绑定</h2>
    <button @click="update">更新</button>

    <p :style="{color: activeColor,fontSize:fontSize + 'px'}">你好世界</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#demo',
        data:{
            a:'aClass',
            activeColor:'yellow',
            fontSize:'10'
        },
        methods:{
            update(){
                this.a = 'bClass';
            }
        }
    })
</script>
</body>
</html>